www.gusucode.com > 237 - 单页带动态效果 html78精品模板 > 237 - 单页带动态效果/css/style.css
html,body { font-family: 'Open Sans', sans-serif; background:#FFF; } /*---- heder ----*/ .heder{ background:#000; } .container{ width:85%; margin:0 auto; } .heder-logo{ float:left; } .heder-logo h1 { margin: 21px 0; } .heder-logo h1 a{ font-size:25px; font-weight:700; font-family: 'Open Sans', sans-serif; color:#FFF; text-decoration: none; } .top-nav { float: right; margin: .5em 0 0 8em; } .top-nav ul { margin: 1.7em 0 0 0; padding: 0; } .top-nav ul li { display:inline-block; } .top-nav ul li a{ color: #FFF; font-size: 14px; font-family: 'Open Sans', sans-serif; padding: 0 1em; text-decoration: none; } .top-nav ul li a:hover{ color:#42B8DD; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } .top-nav ul li a.Signup { color: #42B8DD; margin-left: 33em; padding: 0.5em 1em; border: #42B8DD solid 2px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; } .top-nav ul li a.Signup:hover{ border: #FFF solid 2px; color: #FFF; text-decoration:none; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } /*---- banner ----*/ .banner{ background:url(../images/1.jpg) no-repeat 0px 0px; background-size: cover; min-height: 668px; position:relative; } .banner-info{ position:absolute; top: 38%; right: 20%; width: 53%; } .banner-info a span{ background: url(../images/play.png) no-repeat 0px 0px; width: 120px; height: 120px; top: 0; margin: 0 auto; display: block; background-size: 100%; } .banner-info a span:hover{ background: url(../images/playhr.png) no-repeat 0px 0px; background-size: 100%; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } .banner-info h2{ font-size: 50px; color: #FFF; font-family: 'Open Sans', sans-serif; font-weight: 100; } .banner-info p a{ color:#42B8DD; font-family: 'Open Sans', sans-serif; font-size:16px; text-decoration:none; } .banner-info p a:hover{ color:#E98A20; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } .banner-info a{ float:left; } .banner-text{ float:right; } /*---- services ----*/ .services{ background:#42B8DD; padding: 0 0 4em 0; } .services-hedding h3{ font-size: 67px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; margin: .7em 0; color: #FFF; border-bottom: 10px solid #FFF; } .col-md-3.img-grid { padding: 0; } .services-info{ margin:3em 0 0 0; } .img-grid span { background:url(../images/service-img.png) no-repeat 0px 0px; width:80px; height:80px; display:inline-block; margin: 1em 0 0 0; cursor:pointer; } .col-md-9.img-grid-text { padding: 0; margin: 1.4em 0 0 0; } .img-grid-text h4 { color:#FFF; font-family: 'Open Sans', sans-serif; margin: 0 0 .5em 0; font-size: 18px; text-transform: uppercase; text-decoration:none; } .img-grid-text h4 :hover{ color:#347083; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; } .img-grid-text p{ font-family: 'Open Sans', sans-serif; font-size: 14px; color: #FFF; font-weight: 300; } .img-grid span.food { background:url(../images/service-img.png) no-repeat -176px 0px; } .img-grid span.power { background:url(../images/service-img.png) no-repeat -86px 0px; } .img-grid span.wood { background:url(../images/service-img.png) no-repeat -271px 0px; } /*---- icons ----*/ .icons { text-align: center; padding: 3em 0; } .icons ul{ padding:0; margin:0; } .icons ul li{ display:inline-block; margin: 0 5em; } .icons span.light{ background:url(../images/small-icons.png) no-repeat 0px 0px; width:22px; height:36px; display:inline-block; } .icons span.glob{ background:url(../images/small-icons.png) no-repeat -192px 0px; width:37px; height:36px; display:inline-block; } .icons span.camra{ background:url(../images/small-icons.png) no-repeat -392px 0px; width:37px; height:36px; display:inline-block; } .icons span.setting{ background:url(../images/small-icons.png) no-repeat -592px 0px; width:37px; height:36px; display:inline-block; } .icons span.mike{ background:url(../images/small-icons.png) no-repeat -792px 0px; width:37px; height:36px; display:inline-block; } .icons span.money{ background:url(../images/small-icons.png) no-repeat -992px 0px; width:37px; height:36px; display:inline-block; cursor: pointer; } /*---- works ----*/ .works { background: #EBEBEB; padding: 1em 0 7em 0; } .works-hedding h3{ font-size: 67px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; margin: .7em 0; color: #222; border-bottom: 10px solid #222; width: 29%; } .works ul li{ display:inline-block; } /* Strip /*-----------------------------------------------------------------------------------*/ .b-link-stripe{ position:relative; display:inline-block; vertical-align:top; font-family: 'Open Sans', sans-serif; font-weight: 300; overflow:hidden; } .b-link-stripe .b-wrapper{ position: absolute; width: 100%; height: 30%; top: 0; left: 0; text-align: center; margin: 17.65em 0 0 0; color: #ffffff; overflow: hidden; } .b-link-stripe .b-wrapper:hover { background: #FFF; transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; -webkit-transition: all 0.5s linear; } /*-----------------------------------------------------------------------------------*/ /* Animation effects /*-----------------------------------------------------------------------------------*/ .b-animate-go{ text-decoration:none; } .b-animate{ transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; -webkit-transition: all 0.5s; visibility: hidden; font-size:1.1em; font-weight:700; } .b-animate img{ margin-top:33%; display: -webkit-inline-box; } /* lt-ie9 */ .b-animate-go:hover .b-animate{ visibility:visible; } .b-from-left{ position:relative; left:-100%; } .b-animate-go:hover .b-from-left{ left:0; } span.m_4{ font-size:14px; font-weight:400; } p.m_5 { margin: 2% auto 5%; width: 70%; color: #283A47; font-size: 1.1em; font-weight: 600; line-height: 1.5em; text-align: center; } ul#filters { padding: 0px; } #filters { margin: 3% 0; padding: 0; list-style: none; text-align: left; } #filters li { display:inline-block; display: -webkit-inline-box; display: -moz-inline-box; display: -o-inline-box; display: -ms-inline-box; } #filters li span.active { display: block; padding: 6px 30px; text-decoration: none; background: #1C8DD5; color: #FFFFFF; cursor: pointer; font-size: 18px; font-family: 'Open Sans', sans-serif; font-weight: 400; border: solid 2px #1C8DD5; border-radius: 10px; } #filters li span { display: block; padding: 6px 30px; text-decoration: none; color: #1C8DD5; cursor: pointer; font-size: 18px; font-family: 'Open Sans', sans-serif; font-weight: 400; border: solid 2px #1C8DD5; border-radius: 10px; } #portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; width: 31%; display: none; float: left; overflow: hidden; margin: 1%; } div#portfoliolist { padding: 0; margin: 1em 0; } .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } .portfolio img { max-width:100%; /*--position: relative;--*/ transition: all 300ms!important; -webkit-transition: all 300ms!important; -moz-transition: all 300ms!important; } .portfolio .label { position: absolute; width: 100%; height:40px; bottom:-40px; } .portfolio .label-bg { background: #22B4B8; width: 100%; height:100%; position: absolute; top:0; left:0; } .portfolio .label-text { color:#fff; position: relative; z-index:500; padding:5px 8px; } .portfolio .text-category { display:block; font-size:9px; font-size: 12px; text-transform:uppercase; } /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /*----- effects-comman-css------*/ .contenthover{ padding:1em; } .contenthover h3{ color:#FFF; } .contenthover p{ color:#FFF; font-size:0.875em; line-height:1.5em; } /*-----caption ------*/ .caption { text-align:left; margin-left:9%; } .caption h3{ color:#FFF; font-family: 'Open Sans', sans-serif; font-weight: 700; font-size:1.8em; } .caption p { text-align:left; font-size:14px; } .caption small { display:block; text-align:left; font-size:14px; } p.b-animate.b-from-left.b-delay03 { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 14px; color: #CCCCCC; margin: 0; } p.b-animate.b-from-left.b-delay03 small { display:block; font-size: 16px; } h2.b-animate.b-from-left.b-delay03 { font-family: 'Open Sans', sans-serif; font-size: 18px; color: #42B8DD; margin: 1.5em 0 .5em 0; } /*---- work-bottom ----*/ .work-bottom{ background:#666666; padding: 3% 0 5% 0; } .slider-top{ margin: 0 auto; width: 47%; text-align: center; } .slider-top p{ font-size: 23px; font-family: 'Open Sans', sans-serif; color: #FFF; font-weight: 100; } .slider-top img{ border-radius: 50%; text-align:center; } .slider-top p.title{ text-align:center; color:#FFF; text-transform:uppercase; margin: 0 0 .5em 0; } /*------------------ Slider Part starts Here----------*/ #slider2, #slider3 { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; margin: 0 auto; } .rslides_tabs { list-style: none; padding: 0; background: rgba(0,0,0,.25); box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0); font-size: 18px; list-style: none; margin: 0 auto 50px; max-width: 540px; padding: 10px 0; text-align: center; width: 100%; } .rslides_tabs li { display: inline; float: none; margin-right: 1px; } .rslides_tabs a { width: auto; line-height: 20px; padding: 9px 20px; height: auto; background: transparent; display: inline; } .rslides_tabs li:first-child { margin-left: 0; } .rslides_tabs .rslides_here a { background: rgba(255,255,255,.1); color: #fff; font-weight: bold; } .events { list-style: none; } .callbacks_container { position: relative; float: left; width: 100%; } .callbacks { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .callbacks li { position: absolute; width: 100%; left: 0; top: 0; } .callbacks img { position: relative; z-index: 1; height: auto; border: 0; } .callbacks .caption { display: block; position: absolute; z-index: 2; font-size: 20px; text-shadow: none; color: #fff; left: 0; right: 0; padding: 10px 20px; margin: 0; max-width: none; top: 10%; text-align: center; } .callbacks_nav { position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); top: 52%; left: 0; opacity: 0.7; z-index: 3; text-indent: -9999px; overflow: hidden; text-decoration: none; height: 61px; width: 55px; background: transparent url("../images/themes.png") no-repeat left top; margin-top: -65px; } .callbacks_nav:active { opacity: 1.0; } .callbacks_nav.next { left: auto; background-position: right top; right: 0; } #slider3-pager a { display: inline-block; } #slider3-pager span{ float: left; } #slider3-pager span{ width:100px; height:15px; background:#fff; display:inline-block; border-radius:30em; opacity:0.6; } #slider3-pager .rslides_here a { background: #FFF; border-radius:30em; opacity:1; } #slider3-pager a { padding: 0; } #slider3-pager li{ display:inline-block; } .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li{ position: relative; display: block; float: left; } .rslides img { height: auto; border: 0; } .callbacks_tabs{ list-style: none; position: absolute; top: 88%; z-index: 999; left: 46%; padding: 0; margin: 2% 0 0 0; } @media screen and (max-width: 600px) { .callbacks_nav { top: 47%; } } /*----*/ .callbacks_tabs li{ display:inline-block; } .callbacks_tabs a{ visibility: hidden; } .callbacks_tabs a:after { content: "\f111"; font-size:0; font-family: FontAwesome; visibility: visible; display: block; height:18px; width:18px; display:inline-block; border:2px solid #FFF; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -ms-border-radius: 30px; } .callbacks_here a:after{ border: 2px solid #FFFFFF; background: #FFF; } /*---- team ----*/ .our-team { padding: 3em 0 10em 0; } .team-hedding h3{ font-size: 67px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; margin: .7em 0; color: #222; border-bottom: 10px solid #222; width: 29%; } .team-grid img{ border-radius:50%; } .team-grid{ position:relative; } .team-grid ul{ padding:0; margin:0; position: absolute; top: 18%; right: 18%; } .team-grid ul li{ display:inline-block; } .team-grid ul li.twitter a{ background:url(../images/social-icons.png) no-repeat 0px 0px; width:50px; height:50px; display:inline-block; cursor: pointer; } .team-grid ul li.twitter a:hover{ background:url(../images/social-iconshr.png) no-repeat 0px 0px; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } .team-grid ul li.facebook a{ background:url(../images/social-icons.png) no-repeat -60px 0px; width:50px; height:50px; display:inline-block; cursor: pointer; } .team-grid ul li.facebook a:hover{ background:url(../images/social-iconshr.png) no-repeat -60px 0px; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } .team-grid ul li.cam a{ background:url(../images/social-icons.png) no-repeat -120px 0px; width:50px; height:50px; display:inline-block; cursor: pointer; } .team-grid ul li.cam a:hover{ background:url(../images/social-iconshr.png) no-repeat -120px 0px; transition:.5s all; -webkit-transition:.5s all; -moz-transition:.5s all; -o-transition:.5s all; -ms-transition:.5s all; } .team-grid-text{ width: 87%; margin: 0 0 0 3.8em; } .team-grid-text h5{ color:#42B8DD; font-size:16px; font-family: 'Open Sans', sans-serif; text-transform:uppercase; } .team-grid-text p.caption{ font-family: 'Open Sans', sans-serif; font-size: 14px; color: #8F8E8E; padding: 0; margin: 0 0 1em 0; } .team-grid-text p{ font-family: 'Open Sans', sans-serif; font-size: 14px; color: #414040; } .plus { margin-top: 2em; } /*---- team-bottom ----*/ .team-bottom{ background:#666666; padding:1em 0; } .gift{ text-align:center; margin:4em 0; } .gift span{ background:url(../images/icons.png) no-repeat 0px 0px; width:63px; height:63px; display:inline-block; margin-bottom:1em; } .gift p{ font-size: 60px; font-weight: 300; font-family: 'Open Sans', sans-serif; color: #FFF; margin: 0; } .gift p.text{ font-size: 16px; font-weight: 700; font-family: 'Open Sans', sans-serif; color: #FFF; margin: 0; } .gift span.comments{ background: url(../images/icons.png) no-repeat -294px 0px; width: 74px; } .gift span.cups{ background: url(../images/icons.png) no-repeat -591px 0px; width: 76px; } .gift span.awards{ background: url(../images/icons.png) no-repeat -892px 0px; width: 76px; } /*---- skills ----*/ .skills { padding: 6em 0; } .skills-hedding h3 { font-size: 67px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; margin: .7em 0; color: #222; border-bottom: 10px solid #222; width: 29%; } .circles-text-wrp { font-size: 30.5px; color: #42B8DD; } .skills-grid-text { width: 85%; margin: 0 0 0 6em; } .skills-grid-text h5{ color:#42B8DD; text-transform:uppercase; font-family: 'Open Sans', sans-serif; font-size:16px; font-weight: 700; margin: 3em 0 1em 0; } .skills-grid-text p{ font-size: 14px; font-family: 'Open Sans', sans-serif; } .totam ul{ margin: .5em 0; padding: .5em 0 .5em .5em; cursor: pointer; border: solid #DEDBDB 1px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; } .totam ul li{ display:inline-block; } .totam ul li span{ background: url(../images/skills-small.png) no-repeat 0px 0px; width: 18px; height: 18px; display: inline-block; margin-right: .5em; } .totam ul li.text{ color:#42B8DD; font-size:14px; font-family: 'Open Sans', sans-serif; } .totam ul li.minus{ color:#42B8DD; margin-left:1em; } .totam p{ font-size: 11px; font-family: 'Open Sans', sans-serif; color: #363636; margin:1em 0; } .totam ul li.lock{ background: url(../images/skills-small.png) no-repeat 0px -117px; width: 15px; height: 18px; display: inline-block; margin-right: .5em; } .totam ul li.sub-text{ color: #898989; font-size: 11px; font-family: 'Open Sans', sans-serif; width: 81%; font-weight: 700; } .totam ul li.char{ color:#898989; } .totam ul li.tower{ background: url(../images/skills-small.png) no-repeat 0px -165px; width: 15px; height: 18px; display: inline-block; margin-right: .5em; } .totam ul li.phone{ background: url(../images/skills-small.png) no-repeat 0px -212px; width: 15px; height: 18px; display: inline-block; margin-right: .5em; } .totam ul li.book{ background: url(../images/skills-small.png) no-repeat 0px -260px; width: 19px; height: 18px; display: inline-block; margin-right: .5em; } /*---- skills-middle ----*/ .skills-middle{ background:#42B8DD; padding: 1em 0; } .skills-middle-text { width: 61%; margin: 0 auto; } .skills-middle-text form{ float:left; } .skills-middle-text form input[type="text"] { width: 64%; padding: 3.5% 0; background: #42B8DD; color: #FFF; font-family: 'Open Sans', sans-serif; font-size: 26px; outline: none; font-weight: 300; margin: 0 3em 0 0; border: none; text-indent: 0; } .skills-middle-text form input[type="submit"] { padding: .5em 1em; width: 20%; font-family: 'Open Sans', sans-serif; font-size: 16px; background: #FFF; color: #42B8DD; margin-top: 0.8em; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px; } .skills-middle-text form input[type="submit"]:hover{ background:#347083; color:#FFF; text-decoration:none; transition: .5s all; -webkit-transition: .5s all; -moz-transition:.5s all; -o-transition: .5s all; -ms-transition: .5s all; } /* .button a{ padding: .5em 1em; font-family: 'Open Sans', sans-serif; font-size:16px; background: #FFF; color: #42B8DD; margin-top: 0.8em; float: right; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px; } */ /*---- skills-bottom ----*/ .skills-bottom{ background:#7F7F7F; text-align: center; } .skills-images { padding: 2em 0; margin: 0 auto; width: 87%; } .envato { float: left; margin: 0 1em; } .envato img { width: 100%; } /*---- contact ----*/ .contact{ background:#EBEBEB; padding: 5em 0; } .contact-hedding h3 { font-size: 67px; font-family: 'Open Sans', sans-serif; font-weight: 700; text-transform: uppercase; margin: .7em 0; color: #222; border-bottom: 10px solid #222; width: 29%; } .contact p{ font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600; color: #8F8E8E; margin: 0 0 2em 0; line-height: 1.8em; } .contact p span{ display:block; } .social-icons ul{ padding:0; margin: 1em 0 3em 0; } .social-icons ul li{ display:inline-block; margin:0 .3em; } .social-icons ul li.twit{ background:url(../images/social-icons1.png) no-repeat 0px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.fb{ background:url(../images/social-icons1.png) no-repeat -29px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.google{ background:url(../images/social-icons1.png) no-repeat -59px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.pinterest{ background:url(../images/social-icons1.png) no-repeat -89px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.rect{ background:url(../images/social-icons1.png) no-repeat -119px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.youtube{ background:url(../images/social-icons1.png) no-repeat -149px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.skip{ background:url(../images/social-icons1.png) no-repeat -179px 0px; width:17px; height:17px; cursor: pointer; } .social-icons ul li.dribbble{ background:url(../images/social-icons1.png) no-repeat -209px 0px; width:17px; height:17px; cursor: pointer; } .col-md-8.text-fields { padding: 0; } .text-field-email{ float:left; width: 48%; } .text-field-name{ float:right; width: 48%; } .text-field-area { position: relative; } form input[type="text"]{ width: 100%; padding: 3.5% 0; margin-bottom: 7%; background:#EBEBEB; color: #222; font-family: 'Open Sans', sans-serif; font-size:18px; outline: none; font-weight:700; text-indent: 38px; border: solid 2px #222; position:relative; } form textarea { resize:none; width: 100%; padding: 2% 0; margin-bottom: 5%; background:#EBEBEB; color: #222; font-family: 'Open Sans', sans-serif; font-size:18px; outline: none; font-weight:700; text-indent: 38px; border: solid 2px #222; min-height: 100px; } form input[type="submit"] { width: 100%; padding: 1em 0; background: url(../images/tick.png) no-repeat 92px 29px #FFF; text-align: center; font-size: 26px; color: #42B8DD; outline: none; border: none; margin-top: 3.5em; cursor: pointer; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; } form input[type="submit"]:hover{ background: url(../images/tick.png) no-repeat 92px 29px #347083; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; } .msg-img{ background: url(../images/icons1.png) no-repeat 0px 0px; width: 18px; height: 15px; top: 9.5%; right: 95%; display: inline-block; position: absolute; } .user-img{ background: url(../images/icons1.png) no-repeat -17px 0px; width: 18px; height: 15px; top: 9.5%; right: 43%; display: inline-block; position: absolute; } .pen-img{ background: url(../images/icons1.png) no-repeat -38px 0px; width: 18px; height: 15px; top: 15.5%; right: 95.5%; display: inline-block; position: absolute; } .text-fields-right{ position:relative; } /*---- footer ----*/ .footer{ background:#252525; text-align:center; } .footer h4{ color:#FFF; font-size: 25px; font-weight: 700; font-family: 'Open Sans', sans-serif; margin: 1em 0 0 0; } .copyright { margin: .5em 0 1em 0; } .copyright p { font-size: 16px; color: #555555; font-family: 'Open Sans', sans-serif; } .copyright p a { color: #555555; text-decoration: none; } .copyright p a:hover{ color:#FFF; transition: .5s all; -webkit-transition: .5s all; -moz-transition: .5s all; -o-transition: .5s all; -ms-transition: .5s all; } .footer a img{ margin-bottom:1em; } span.menu { display: none; } /*----- responsive-design ------*/ @media (max-width:1440px) { .banner-info { width: 57%; } } @media (max-width:1366px) { .banner-info { width: 60%; } } @media (max-width:1280px){ .banner-info { width: 64%; } } @media (max-width:1024px){ .top-nav ul { margin: 1.7em 0 0 0; } .icons ul li { margin: 0 4em; } .top-nav ul li a.Signup { margin-left: 19em; } .banner-info { width: 80%; right: 11%; } .banner-info img { width: 80%; } .services-hedding h3 { font-size: 53px; } .col-md-9.img-grid-text { padding: 0 1em; overflow: hidden; height: 80px; } .works-hedding h3 { font-size: 53px; } .b-link-stripe .b-wrapper { margin: 14.65em 0 0 0; } .slider-top p.title { overflow: hidden; height: 33px; } .team-hedding h3 { font-size: 53px; } .team-grid ul { right: 2%; top: 13%; } .skills-hedding h3 { font-size: 53px; } .skills-middle-text { width: 57%; } .totam ul li.sub-text { font-size: 10px; width: 80%; } .totam ul li.char { margin-left: 0; } .totam ul li.book { margin-right: 0; } .totam ul li span { margin-right: 0; } .totam ul li.text { font-size: 12px; width: 81%; } .totam ul li.minus { margin-left: 0; } .envato { width: 16%; } .contact-hedding h3 { font-size: 53px; } .msg-img { right: 94%; top: 9%; } .user-img { right: 42%; top: 8.5%; } .pen-img { right: 94.5%; top: 14.5%; } form input[type="submit"] { background: url(../images/tick.png) no-repeat 64px 29px #FFF; margin-top: 3em; } form input[type="submit"]:hover { background: url(../images/tick.png) no-repeat 64px 29px #347083; } } @media (max-width:768px){ span.menu { display:block; text-align:right; padding: 1.3em; } span.menu img{ cursor:pointer; } .top-nav { margin: 0; float: none; } .top-nav ul { padding: 0; margin: 0; z-index: 999; position: absolute; width: 95%; } .top-nav ul.nav1 li a { margin: 0px; } ul.nav1 { display:none; } .top-nav ul.nav1 li { display: block; text-align: center; padding: 1em 0; background: rgba(2, 2, 2, 0.48); } .top-nav ul li a { font-size: 16px } .banner-info { width: 90%; right: 3%; top: 35%; } .banner-info h2 { font-size: 40px; } .banner { min-height: 376px; } .services-hedding h3 { font-size: 43px; width: 29%; } .services-info { margin: 1em 0 0 0; } .skills { padding: 0 0 1em 0; } .skills-middle-text { width: 73%; } .col-md-4.services-info { text-align: center; } .img-grid-text p { width: 48%; margin: 0 auto; } .b-link-stripe .b-wrapper { margin: 11.15em 0 0 0; } h2.b-animate.b-from-left.b-delay03 { font-size: 16px; margin: 1em 0 .5em 0; } p.b-animate.b-from-left.b-delay03 { font-size: 13px; } .our-team { padding: 3em 0 5em 0; } .icons ul li { margin: 0 2em; } .callbacks_tabs { left: 44%; } .team-grid { text-align: center; } .team-grid ul { right: 21%; top: 21%; } .team-grid-text p.caption { text-align: center; } .team-grid-text { width: 55%; margin: 0 auto; } .team-grid-text p { overflow: hidden; height: 38px; } .gift p { font-size: 50px; } .gift p.text { font-size: 14px; } .skills-grid { text-align: center; padding: 1em 0; } .skills-grid-text p { overflow: hidden; height: 37px; } .tab1 { margin: .5em 0; } .totam ul { width: 76%; margin:0 auto; } .totam ul li.book { margin-right: .2em; } .totam ul li.sub-text { width: 90%; font-size: 14px; } .totam ul li.text { width: 91%; } .tab2 { margin: .5em 0; } .tab3{ margin: .5em 0; } .tab4 { margin: .5em 0; } .totam p { margin: 1em auto; width: 74%; font-size: 14px; } .envato { width: 15%; } .skills-middle-text p { font-size: 24px; } .button a { font-size: 14px; margin-top: .8em; } .contact { padding: 0 0 1em 0; } .col-md-4.text-fields { padding: 0; } form input[type="submit"] { background: url(../images/tick.png) no-repeat 275px 29px #FFF; margin-top: 1em; } form input[type="submit"]:hover { background: url(../images/tick.png) no-repeat 275px 29px #347083; } .slider-top p { font-size: 18px; } .msg-img { right: 95%; top: 9%; } .user-img { right: 43%; } .pen-img { right: 95%; top: 15.5%; } } @media(max-width:640px){ .container { width: 100%; margin: 0 auto; } .heder-logo h1 { margin: 6px 0 0 0; } span.menu { padding: 1em 0 1em 0; } .banner-info { width: 95%; right: 2%; } .banner-info a span { width: 100px; height: 100px; } .banner-info img { width: 80%; } .banner-info h2 { font-size: 34px; } .services-hedding h3 { font-size: 33px; border-bottom: 7px solid #FFF; } .works-hedding h3 { font-size: 33px; border-bottom: 7px solid #222; } #filters li span.active { padding: 4px 25px; font-size: 16px; } #filters li span { padding: 4px 25px; font-size: 16px; } .b-link-stripe .b-wrapper { margin: 9.15em 0 0 0; } h2.b-animate.b-from-left.b-delay03 { font-size: 14px; margin: .2em 0 .2em 0; } p.b-animate.b-from-left.b-delay03 { font-size: 12px; } .works { padding: 1em 0 3em 0; } .slider-top p { font-size: 14px; } .team-hedding h3 { font-size: 33px; } .team-grid ul { right: 15%; } .gift { margin: 1em 0; } .skills-hedding h3 { font-size: 33px; } .totam ul li.text { width: 90%; font-size: 16px; } .totam ul li.sub-text { width: 89%; } .skills-middle-text { width: 89%; } .skills-middle-text p { font-size: 22px; } .button a { margin-top: .7em; } .envato { width: 14%; } .contact-hedding h3 { font-size: 33px; } .msg-img { right: 95.5%; top: 8%; } .user-img { right: 44%; top: 8%; } .pen-img { right: 96.5%; top: 13.5%; } form input[type="text"] { text-indent: 24px; font-size: 14px; } form input[type="submit"] { padding: 1em 0; } form textarea { text-indent: 20px; } form input[type="submit"] { background: url(../images/tick.png) no-repeat 218px 29px #FFF; } form input[type="submit"]:hover { background: url(../images/tick.png) no-repeat 218px 29px #347083; } .team-grid-text p.caption { height: 20px; } } @media(max-width:480px){ .banner-info { text-align: center; } .banner-info a { float: none; } .banner-info img { width: 24%; } .banner-text { float: none; } .banner-info h2 { font-size: 32px; } .services-hedding h3 { width: 40%; } .services { padding: 0 0 1em 0; } .top-nav ul.nav1 li { padding: .5em 0; } .top-nav ul li a.Signup { padding: 0.2em 1em; } .icons ul li { margin: 0 1em; } #portfoliolist .portfolio { width: 46%; } .b-link-stripe .b-wrapper { margin: 10em 0 0 0; } .callbacks_tabs { left: 39%; } .team-grid ul { right: 2%; top: 17%; } .our-team { padding: 0 0 2em 0; } .gift span { margin-bottom: 0em; } .gift { margin: 3em 0; } .totam ul li.text { width: 86%; } .totam ul li.sub-text { width: 85%; } .skills-grid-text { text-align: center; margin:0; width: 100%; } .totam ul { width: 87%; } .totam p { width: 85%; } .skills-middle-text { text-align: center; } .skills-middle-text form input[type="text"] { outline: none; padding: 0; margin: 0 0 .5em 0; width: 100%; text-align: center; } .skills-middle-text form input[type="submit"] { width: 27%; } .envato { float: none; width: 60%; text-align: center; margin: 1em auto; } .text-field-email { float: none; width: 100%; } .msg-img { right: 94.5%; top: 6.5%; } .text-field-name { float: none; width: 100%; } .user-img { top: 35.5%; right: 94%; } .pen-img { right: 94.5%; } form textarea { min-height: 100px; font-size: 14px; } .pen-img { top: 10.5%; right: 95.5%; } form input[type="submit"] { padding: .6em 0; background: url(../images/tick.png) no-repeat 141px 18px #FFF; } form input[type="submit"]:hover { background: url(../images/tick.png) no-repeat 141px 18px #347083; } } @media(max-width:320px){ span.menu { padding: 1em 0 1em 0; } .top-nav ul { width: 91%; } .banner-info a span { width: 80px; height: 80px; } .banner { min-height: 297px; } .banner-info { top: 18%; } .banner-info h2 { font-size: 24px; } .services-info { margin: .5em 0 0 0; } .col-md-9.img-grid-text { margin: .5em 0 0 0; } .services-hedding h3 { width: 66%; font-size: 24px; border-bottom: 4px solid #FFF; } .img-grid-text p { width: 100%; overflow:hidden; height: 43px; } .icons ul li { margin: 0; } .icons { padding: 1em 0; } .works-hedding h3 { width: 56%; font-size: 24px; border-bottom: 4px solid #222; } #filters li span.active { padding: 2px 20px; font-size: 14px; } #filters li span { padding: 2px 20px; font-size: 14px; } .b-link-stripe .b-wrapper { margin: 4.3em 0 0 0; height: 52%; } .slider-top { width: 100%; } .callbacks_tabs { left: 32%; } .team-hedding h3 { width: 48%; font-size: 24px; border-bottom: 4px solid #222; } .team-grid-text { width: 100%; } .team-grid ul { right: 22%; top: 42%; } .gift { margin: 1em 0; } .gift p { font-size: 33px; } .skills-hedding h3 { width: 52%; font-size: 24px; border-bottom: 4px solid #222; } .skills { padding:.5em 0; } .skills-grid-text h5 { font-size: 14px; } .totam ul { width: 100%; } .totam ul li.text { width: 82%; font-size: 13px; } .totam ul li.sub-text { width: 79%; font-size: 11px; } .totam p { width: 100%; overflow: hidden; height: 58px; } .skills-middle-text { width: 100%; text-align: center; } .skills-middle-text form input[type="text"] { font-size: 22px; } .skills-middle-text form input[type="submit"] { padding: .5em 1em; width: 37%; font-family: 'Open Sans', sans-serif; font-size: 14px; background: #FFF; color: #42B8DD; margin-top: 0.8em; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px; } .contact { padding: 1em 0; } .contact-hedding h3 { width: 57%; font-size: 24px; border-bottom: 4px solid #222; } .contact p { font-size: 12px; } .msg-img { right: 90.5%; top: 5.5%; } form input[type="text"] { text-indent: 25px; font-size: 14px; } .user-img { top: 31%; right: 90%; } .pen-img { right: 91.5%; } form textarea { font-size: 14px; text-indent: 23px; } form input[type="submit"] { background: url(../images/tick.png) no-repeat 59px 17px #FFF; } form input[type="submit"]:hover { background: url(../images/tick.png) no-repeat 59px 17px #347083; } }